<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="../EXT4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
	href="../css/style.css" />
<script type="text/javascript" src="../EXT4/ext-all.js"></script>
<script type="text/javascript" src="../script/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
	
	
	Ext.QuickTips.init();
	
	Ext.define('Role', { 
        extend: 'Ext.data.Model', 
        fields: ['id','roleName'] 
    });
    
    Ext.define('Action', { 
        extend: 'Ext.data.Model',
        idProperty:'id',
        fields: ['id','actionText'],
		idgen: {
			type: 'sequential',
			prefix: ''
	}
    });
	
	var role_store = Ext.create('Ext.data.Store', {
		model: 'Role', 
        autoLoad: true,
        pageSize: 10,
        proxy: { 
            type: 'ajax', 
            url: '../service/role_allrole',
            reader: { 
                type: 'json', 
                root: 'root'
            }
        }
	});
	
	var action_store = Ext.create('Ext.data.Store', {
		model: 'Action', 
        autoLoad: true,
        pageSize: 10,
        proxy: { 
            type: 'ajax', 
            url: '../service/action1_allaction',
            reader: { 
                type: 'json', 
                root: 'root'
            }
        }
	});
	
	var role_action_store = Ext.create('Ext.data.Store', {
		model: 'Action', 
        autoLoad: false,
        proxy: { 
            type: 'ajax', 
            url: '../service/action1_roleactions',
            reader: { 
                type: 'json', 
                root: 'root'
            }
        }
	});
	
	var m_action = Ext.create('Ext.selection.CheckboxModel',{
		checkOnly:true
	});
	
	var m_role = Ext.create('Ext.selection.CheckboxModel',{
		checkOnly:false,
		mode:'SINGLE',
		showHeaderCheckbox: false,
		listeners: { 
			'selectionchange':function(view,selected){
				m_action.deselectAll(false);
				Ext.Ajax.request({
					url: '../service/action1_roleactions',
					params: {'roleid': selected[0].data.id},
					success: function(response, opts){
						var json = Ext.decode(response.responseText).root;
						for (var i = 0; i < json.length; i++){
							var aid = action_store.getById(json[i].id);
							
							if(aid == undefined) continue;
							
							var rec = aid;
							m_action.select(rec,true,true);
						}
					}
				});
			}
		}
	});
	
		
	var main_panel = Ext.create('Ext.Panel', {
	    border: 0,
	    region: 'center',
	    layout: {
	        type: 'hbox',
	        align: 'stretch'
	    },
	    items: [{
	        xtype: 'grid',
	        selModel: m_role,
	        valueField: 'id',
	        id: 'role_grid',
	        columns:[{ 
	        	text: '角色名',  dataIndex: 'roleName', width:'80%'
	        }],
	        store: role_store,
	        title: '角色列表',
	        flex:1,
	        margin:5
	    },{
	        xtype: 'grid',
	        selModel: m_action,
	        id: 'action_grid',
	        valueField: 'id',
	        columns:[{
	        	text: '功能',  dataIndex: 'actionText', width:'90%'
			}],
	        store: action_store,
	        title: '功能列表',
	        flex:1,
	        margin: 5
	    }]
	});
	
	var button_panel = Ext.create('Ext.Panel',{
		region: 'south',
		style:'text-align:right',
		border: 0,
    	items:[{
    		xtype: 'button',
    		text:'确定',
    		width:120,
    		height:40,
    		handler: function() {
    			var actions = new Array();
    			Ext.each(m_action.getSelection(),function(record, index) {
    				actions.push(record.data.id);
    			});
    			
    			Ext.Ajax.request({
    				url:'../service/role_updateaction',
    				params: {
    					'roleid': m_role.getSelection()[0].data.id,
    					'actions': actions
    					},
    				success: function(response, opts){
    					Ext.Msg.alert('提示', Ext.decode(response.responseText).msg);	
    				},
    				failure:function(form, action) {
    					Ext.Msg.alert('提示', Ext.decode(response.responseText).msg);
    				}
    			});
    			
    		}
    	}]
	})

	Ext.create('Ext.Panel', {
		height: 500,
		defaults: {
            split: false,
            collapsible: false
        },
	
		layout: {
            type: 'border',
            padding: 5
        },
        renderTo: 'funcmng',
        items:[main_panel,button_panel]
	});
});
</script>
</head>
<body>
<div id="funcmng"></div>
</body>
</html>